<template>
  <div class="task-card">
    <div class="main-box">
      <div class="content">
        <span class="title">{{ cardData.title }}</span>
        <span class="sub-title" v-for="subTitle in cardData.subTitle" :key="subTitle">
          {{ subTitle }}
        </span>
      </div>
      <van-image v-if="statusImage" class="process-status" :src="statusImage" />
    </div>
    <slot name="menu" />
  </div>
</template>

<script>
export default {
  name: 'taskCard',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    flowStatus: {
      type: Number
    },
    finishedWithAgree: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      statusImg: require('@/assets/icon/approval-icon2x.png'),
      passImg: require('@/assets/icon/pass-icon2x.png'),
      refuseImg: require('@/assets/icon/refuse-icon2x.png'),
      draftImg: require('@/assets/icon/draft-icon2x.png'),
      cancelImg: require('@/assets/icon/cancel-icon2x.png'),
      stoppedImg: require('@/assets/icon/stopped-icon2x.png')
    }
  },
  computed: {
    statusImage () {
      switch (this.flowStatus) {
        case this.SysFlowWorkOrderStatus.APPROVING:
        case this.SysFlowWorkOrderStatus.SUBMITED:
          // 审批中
          return this.statusImg;
        case this.SysFlowWorkOrderStatus.STOPPED:
          // 终止
          return this.stoppedImg;
        case this.SysFlowWorkOrderStatus.REFUSED:
          // 拒绝
          return this.refuseImg;
        case this.SysFlowWorkOrderStatus.FINISHED:
          // 通过
          return this.finishedWithAgree ? this.passImg : this.refuseImg;
        case this.SysFlowWorkOrderStatus.CANCEL:
          // 撤销
          return this.cancelImg;
        case this.SysFlowWorkOrderStatus.DRAFT:
          // 草稿
          return this.draftImg;
        default:
          return null;
      }
    }
  }
}
</script>

<style scoped>
  .task-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
  }
  .main-box {
    display: flex;
  }
  .main-box .content {
    width: 100px;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .main-box .process-status {
    flex-grow: 0;
    flex-shrink: 0;
    width: 67px;
    height: 53px;
    margin-left: 15px;
    margin-top: 15px;
  }
  .main-box .content .title {
    display: block;
    font-weight: bold;
    color: #333333;
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .main-box .content .sub-title {
    display: block;
    color: #666666;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
